import { connect } from 'dva'
import React, { Component } from 'react'
import { WhiteSpace, Toast, List, Icon, Modal } from 'antd-mobile'
import constans from '../constan'
import styles from './InfoPage.css'
const Item = List.Item;
const alert = Modal.alert;
class InfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    logout() {
        alert('退出登录', '确定要退出当前账户吗？', [
            { text: '取消', onPress: () => console.log('cancel') },
            {
                text: '确认', onPress: () => {
                    console.log('logout');
                    this.props.dispatch({ type: 'user/loginout' });
                }
            },
        ])
    }
    // eslint-disable-next-line
    componentWillMount() {
        if (this.props.user.login_state !== constans.SuccessLogin) {
            Toast.fail('您尚未登录');
            this.props.dispatch({ type: 'user/gotologin' });
        }
    }
    componentDidMount() {
        //console.log(this.props.user.login_state)
    }
    render() {
        console.log(this.props)
        const { photo, nickname } = this.props.user;
        return (
            <div>
                <div className={styles.headerbox}>
                    <div className={styles.avatarbox}>
                        <img alt="头像" src={photo}></img>
                    </div>
                    <WhiteSpace size='lg'></WhiteSpace>
                    <div className={styles.namebox}>{nickname}</div>
                    <Icon type="left" size="lg" color="#fff" className={styles.backicon} 
                        onClick={() => this.props.history.goBack()}
                    />
                    <Icon type="ellipsis" size="md" color="#fff" className={styles.editicon} 
                        onClick={() => this.props.history.push('/my/infoedit')}
                    />
                </div>
                <WhiteSpace size='md'></WhiteSpace>
                <div className={styles.contentbox}>
                    <List>
                        <Item
                            arrow="horizontal"
                        >徽章墙
                    </Item>
                        <Item
                            arrow="horizontal"
                        >打卡日历
                    </Item>
                    </List>
                    <WhiteSpace size='md'></WhiteSpace>
                    <List>
                        <Item extra={'男'}>性别</Item>
                        <Item extra={''}>生日</Item>
                        <Item extra={''}>地区</Item>
                        <Item extra={''}>学校</Item>
                        <Item extra={''}>个人简介</Item>
                    </List>
                </div>
                <WhiteSpace size='xl' />
                <List>
                    <Item
                        arrow="horizontal"
                        onClick={() => this.logout()}
                    >
                        退出登录
                        </Item>
                </List>
            </div>
        )
    }
}

function mapStateToProps({ user }) {
    return {
        user
    }
}


export default connect(mapStateToProps)(InfoPage);
